{% extends "student/base.html" %}

{% block title %}学生首页 - 期末成绩登记统计分析系统{% endblock %}

{% block styles %}
<style>
  .dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  /* 轮播图和公告栏容器 */
  .carousel-announcement-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
  }

  /* 轮播图样式 */
  .carousel-container {
    width: 100%;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  .carousel {
    position: relative;
    width: 100%;
    height: 400px;
  }

  .carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
  }

  .carousel-item.active {
    opacity: 1;
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    backdrop-filter: blur(5px);
  }

  .carousel-caption h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }

  .carousel-caption p {
    margin: 0;
    font-size: 18px;
    opacity: 0.95;
    line-height: 1.6;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }

  .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 10;
  }

  .carousel-control:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  .carousel-prev {
    left: 20px;
  }

  .carousel-next {
    right: 20px;
  }

  .carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
  }

  .carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .carousel-indicator.active {
    background: white;
    transform: scale(1.2);
  }

  /* 公告栏样式 */
  .announcement-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 25px;
    height: 400px;
    display: flex;
    flex-direction: column;
  }

  .announcement-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--light-blue);
  }

  .announcement-header i {
    color: var(--primary-blue);
    font-size: 24px;
  }

  .announcement-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
    font-weight: 600;
  }

  .announcement-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
  }

  .announcement-list::-webkit-scrollbar {
    width: 6px;
  }

  .announcement-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  .announcement-list::-webkit-scrollbar-thumb {
    background: var(--light-blue);
    border-radius: 3px;
  }

  .announcement-item {
    padding: 15px;
    border-radius: 10px;
    background: #f8f9fa;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .announcement-item:hover {
    transform: translateX(5px);
    background: #f0f7ff;
  }

  .announcement-item.active {
    background: var(--light-blue);
  }

  .announcement-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .announcement-title i {
    color: var(--primary-blue);
    font-size: 14px;
  }

  .announcement-date {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
  }

  .announcement-content {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: none;
  }

  .announcement-item.active .announcement-content {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
  }

  .announcement-footer {
    margin-top: 15px;
    text-align: center;
  }

  .announcement-more {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
  }

  .announcement-more:hover {
    color: var(--accent-blue);
    transform: translateX(3px);
  }

  .welcome-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
  }

  .welcome-title {
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .welcome-title i {
    color: var(--primary-blue);
    font-size: 28px;
  }

  .welcome-text {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
  }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
  <!-- 轮播图和公告栏容器 -->
  <div class="carousel-announcement-container">
    <!-- 轮播图组件 -->
    <div class="carousel-container">
      <div class="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="{{ url_for('static', filename='slider/t1.jpg') }}" alt="成绩查询">
            <div class="carousel-caption">
              <h3>成绩查询系统</h3>
              <p>便捷查询课程成绩，实时掌握学习动态</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="{{ url_for('static', filename='slider/t2.jpg') }}" alt="成绩分析">
            <div class="carousel-caption">
              <h3>成绩分析</h3>
              <p>智能分析学习情况，助力学业进步</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="{{ url_for('static', filename='slider/t3.jpg') }}" alt="学习管理">
            <div class="carousel-caption">
              <h3>学习管理</h3>
              <p>科学管理学习进度，提升学习效率</p>
            </div>
          </div>
        </div>
        <div class="carousel-control carousel-prev" onclick="prevSlide()">
          <i class="fas fa-chevron-left"></i>
        </div>
        <div class="carousel-control carousel-next" onclick="nextSlide()">
          <i class="fas fa-chevron-right"></i>
        </div>
        <div class="carousel-indicators">
          <div class="carousel-indicator active" onclick="goToSlide(0)"></div>
          <div class="carousel-indicator" onclick="goToSlide(1)"></div>
          <div class="carousel-indicator" onclick="goToSlide(2)"></div>
        </div>
      </div>
    </div>

    <!-- 公告栏组件 -->
    <div class="announcement-card">
      <div class="announcement-header">
        <i class="fas fa-bullhorn"></i>
        <h3>通知公告</h3>
      </div>
      <div class="announcement-list">
        <div class="announcement-item active">
          <div class="announcement-title">
            <i class="fas fa-calendar-alt"></i>
            2025年春季学期期末考试安排
          </div>
          <div class="announcement-date">2025-05-20</div>
          <div class="announcement-content">
            各位同学请注意，2025年春季学期期末考试将于6月15日开始，请提前做好复习准备，按时参加考试。具体考试安排请查看教务系统。
          </div>
        </div>
        <div class="announcement-item">
          <div class="announcement-title">
            <i class="fas fa-graduation-cap"></i>
            成绩查询系统开放通知
          </div>
          <div class="announcement-date">2025-04-15</div>
          <div class="announcement-content">
            本学期成绩查询系统将于6月25日正式开放，请同学们及时登录系统查询成绩。如有疑问，请及时联系任课教师。
          </div>
        </div>
        <div class="announcement-item">
          <div class="announcement-title">
            <i class="fas fa-book-reader"></i>
            学习经验分享会
          </div>
          <div class="announcement-date">2025-03-10</div>
          <div class="announcement-content">
            为帮助同学们提高学习效率，学校将于3月30日举办"优秀学生学习经验分享会"，欢迎同学们踊跃参加。
          </div>
        </div>
      </div>
      <div class="announcement-footer">
        <a href="#" class="announcement-more">
          查看更多通知
          <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>

  <div class="welcome-card">
    <h1 class="welcome-title">
      <i class="fas fa-user-graduate"></i>
      欢迎回来，{{ current_user.name }}
    </h1>
    <p class="welcome-text">
      这里是您的成绩查询平台，您可以在这里查看课程成绩、分析学习情况、了解学习动态。
    </p>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  // 轮播图功能
  let currentSlide = 0;
  const slides = document.querySelectorAll('.carousel-item');
  const indicators = document.querySelectorAll('.carousel-indicator');
  const totalSlides = slides.length;
  let slideInterval;

  function showSlide(index) {
    // 移除所有活动状态
    slides.forEach(slide => slide.classList.remove('active'));
    indicators.forEach(indicator => indicator.classList.remove('active'));

    // 添加新的活动状态
    slides[index].classList.add('active');
    indicators[index].classList.add('active');
    currentSlide = index;
  }

  function nextSlide() {
    const next = (currentSlide + 1) % totalSlides;
    showSlide(next);
  }

  function prevSlide() {
    const prev = (currentSlide - 1 + totalSlides) % totalSlides;
    showSlide(prev);
  }

  function goToSlide(index) {
    showSlide(index);
  }

  function startSlideShow() {
    stopSlideShow(); // 清除现有定时器
    slideInterval = setInterval(nextSlide, 3000); // 每3秒切换一次
  }

  function stopSlideShow() {
    if (slideInterval) {
      clearInterval(slideInterval);
    }
  }

  // 鼠标悬停时暂停轮播
  document.querySelector('.carousel').addEventListener('mouseenter', stopSlideShow);
  document.querySelector('.carousel').addEventListener('mouseleave', startSlideShow);

  // 公告栏交互
  document.addEventListener('DOMContentLoaded', function () {
    startSlideShow();

    const announcementItems = document.querySelectorAll('.announcement-item');
    announcementItems.forEach(item => {
      item.addEventListener('click', function () {
        // 移除其他项目的active类
        announcementItems.forEach(i => i.classList.remove('active'));
        // 添加当前项目的active类
        this.classList.add('active');
      });
    });
  });
</script>
{% endblock %}